<template>
    <div class="organization-detail">
        <el-card class="box-card">
            <template #header>
                <pageTitle :title="'組織詳情'" />
            </template>

            <!-- 基礎信息 -->
            <el-card shadow="never" class="section-card">
                <template #header>
                    <pageTitle :title="'基礎信息'" />
                </template>

                <el-form ref="baseFormRef" :model="baseForm" :rules="baseRules" label-width="120px"
                    label-position="right">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="組織名稱" prop="name">
                                <el-input v-model="baseForm.name" placeholder="請輸入組織名稱" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="組織代碼" prop="code">
                                <el-input v-model="baseForm.code" placeholder="請輸入組織代碼" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="組織類型" prop="type">
                                <el-select v-model="baseForm.type" placeholder="請選擇組織類型" clearable>
                                    <el-option v-for="item in orgTypeOptions" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="上級組織" prop="parent">
                                <el-select v-model="baseForm.parent" placeholder="請選擇上級組織" clearable>
                                    <el-option v-for="item in parentOrgOptions" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="組織負責人" prop="leader">
                                <el-input v-model="baseForm.leader" placeholder="請輸入組織負責人" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="組織簡稱" prop="shortName">
                                <el-input v-model="baseForm.shortName" placeholder="請輸入組織簡稱" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="工作地點" prop="location">
                                <el-select v-model="baseForm.location" placeholder="請選擇工作地點" clearable>
                                    <el-option v-for="item in locationOptions" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="工作城市" prop="city">
                                <el-cascader v-model="baseForm.city" :options="cityOptions" placeholder="請選擇省市区"
                                    clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="編制人數" prop="staffCount">
                                <el-input-number v-model="baseForm.staffCount" :min="0" placeholder="請輸入編制人數"
                                    controls-position="right" style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="組織狀態" prop="status">
                                <el-switch v-model="baseForm.status" active-text="啟用" inactive-text="禁用"
                                    :active-value="1" :inactive-value="0" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="組織描述" prop="description">
                                <el-input v-model="baseForm.description" type="textarea" :rows="4" placeholder="請輸入組織描述"
                                    maxlength="200" show-word-limit />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>

            <!-- 企業信息 -->
            <el-card shadow="never" class="section-card">
                <template #header>
                    <pageTitle :title="'企業信息'" />
                </template>

                <el-form ref="companyFormRef" :model="companyForm" label-width="120px" label-position="right">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="公司名稱" prop="companyName">
                                <el-input v-model="companyForm.companyName" placeholder="請輸入公司名稱" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="納稅人識別號" prop="taxId">
                                <el-input v-model="companyForm.taxId" placeholder="請輸入納稅人識別號" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="法定代表人" prop="legalRepresentative">
                                <el-input v-model="companyForm.legalRepresentative" placeholder="請輸入法定代表人" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="開戶行" prop="bankName">
                                <el-input v-model="companyForm.bankName" placeholder="請輸入開戶行" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="銀行賬號" prop="bankAccount">
                                <el-input v-model="companyForm.bankAccount" placeholder="請輸入銀行賬號" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="註冊地址" prop="registeredAddress">
                                <el-input v-model="companyForm.registeredAddress" placeholder="請輸入註冊地址" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="電話號碼" prop="phone">
                                <el-input v-model="companyForm.phone" placeholder="請輸入電話號碼" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="郵箱地址" prop="email">
                                <el-input v-model="companyForm.email" placeholder="請輸入郵箱地址" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>

            <div class="action-buttons">
                <el-button type="primary" @click="submitForm">保存</el-button>
                <el-button @click="resetForm">重置</el-button>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import pageTitle from "@/components/pageTitle/pageTitle.vue"

const baseFormRef = ref(null);
const companyFormRef = ref(null);

const baseForm = reactive({
    name: "",
    code: "",
    type: "",
    parent: "",
    leader: "",
    shortName: "",
    location: "",
    city: [],
    staffCount: 0,
    status: 1,
    description: "",
});

const companyForm = reactive({
    companyName: "",
    taxId: "",
    legalRepresentative: "",
    bankName: "",
    bankAccount: "",
    registeredAddress: "",
    phone: "",
    email: "",
});

const baseRules = {
    name: [{ required: true, message: "請輸入組織名稱", trigger: "blur" }],
    type: [{ required: true, message: "請選擇組織類型", trigger: "change" }],
    parent: [
        { required: true, message: "請選擇上級組織", trigger: "change" },
    ],
};

// 模擬數據 - 實際項目中應該從接口獲取
const orgTypeOptions = [
    { value: "1", label: "總公司" },
    { value: "2", label: "分公司" },
    { value: "3", label: "部門" },
    { value: "4", label: "小組" },
];

const parentOrgOptions = [
    { value: "1", label: "總公司" },
    { value: "2", label: "北京分公司" },
    { value: "3", label: "上海分公司" },
];

const locationOptions = [
    { value: "1", label: "總部大樓" },
    { value: "2", label: "科技園區" },
    { value: "3", label: "遠程辦公" },
];

const cityOptions = [
    {
        value: "beijing",
        label: "北京",
        children: [
            { value: "chaoyang", label: "朝陽區" },
            { value: "haidian", label: "海淀區" },
        ],
    },
    {
        value: "shanghai",
        label: "上海",
        children: [
            { value: "pudong", label: "浦東新區" },
            { value: "huangpu", label: "黃浦區" },
        ],
    },
];

const submitForm = () => {
    baseFormRef.value.validate((valid) => {
        if (valid) {
            console.log("提交表單:", { ...baseForm, ...companyForm });
        } else {
            console.log("表單驗證失敗");
            return false;
        }
    });
};

const resetForm = () => {
    baseFormRef.value.resetFields();
    companyFormRef.value.resetFields();
};
</script>


<style scoped>
.organization-detail {
    padding: 20px;
}

.box-card {
    max-width: 1400px;
}

.card-header {
    font-size: 18px;
    font-weight: bold;
}

.section-card {
    margin-bottom: 20px;
}

.section-header {
    font-size: 16px;
    font-weight: bold;
}

.action-buttons {
    text-align: right;
    margin-top: 20px;
}

.el-row {
    margin-bottom: 20px;
}

.el-select,
.el-cascader {
    width: 100%;
}
</style>